<template>
    <div class="home-swipe">
        <van-search v-model="value" placeholder="请输入搜索关键词" 
        input-align="center" @focus="onFocus" @search="onSearch"/>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
              <van-image :src="item.imageUrl" lazy-load radius="20px"/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { Toast ,} from 'vant';
// import axios from "axios";
export default {
  data() {
    return {
      value: '',
      bannerData: []
    };
  },
  methods:{
    //写一个完成网络请求的方法
    getBanner(){
      this.$request('get','/banner')
      .then(res =>{
        console.log(res)
        if(res.code == 200){
          this.bannerData = res.banners
        }
      })
        
    },
    onFocus(){
        Toast("触发获得焦点事件")
    },
    onSearch(val){
        Toast(val)
    },
  },
  created(){
    this.getBanner();//调用网络请求的方法，获取数据
  }
  // mounted(){
  //   this.getBanner();
  // },
};
</script>

<style scoped>
</style>